<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header class="header">
        <h3>登录页</h3>
    </header>

    <section class="section">
        <div class="form">
              <div>
                  <input type="text" placeholder="请输入账号">
              </div>
              <div>
                  <input type="password" placeholder="请输入密码">
              </div>
              <div>
                  <!-- checked -->
                  <input type="checkbox"> <span>十天免登录</span>
              </div>
              <div>
                  <button class="btn-login">登录</button>
              </div>
        </div>
    </section>


    <script src="./js/user.js"></script>
    <script src="./cookie/cookie.js"></script>
    <script>
        // 要求：
            // 点击勾选了复选框表示十天免登录，点击登录按钮，把免登录的标记(cookie)缓存起来,跳转首页
            // 以后进入当前页面,判断是否存在用户唯一标记的cookie
            // 存在,可以直接跳转首页
            // 不存在,那么就需要输入账号和密码,然后点击登录,跳转首页

       // 思考：
            // 控制哪些标签
            // 给哪些标签绑定事件
            // 如何获取输入框的值
            // 如何判断复选框的勾选状态 .checked
            // 判断缓存数据（记录用户的信息）
            // file:///  这种协议下的环境操作不了 cookie
            // http(s):// 这种协议下的环境才能操作 cookie   
            // document.cookie="name=value"
            // document.cookie="name1=value1"


        // 编写函数 初始化（首次打开页面）
        var init = function() { 
            // 1. 获取页面相关的标签
            var txtInput = document.querySelector("input[type='text']");
            var pwdInput = document.querySelector("input[type='password']");
            var checkBox = document.querySelector("input[type='checkbox']");
            var btnLogin = document.querySelector(".btn-login");

            // 2.判断当前网站是否存在用户信息的cookie
            if(getCookie("_userid")){
                // 延迟函数
                var delay = setTimeout(function(){
                    // 清除延迟
                    clearTimeout(delay);
                    // 跳转首页
                    location.href = "./index.html";
                },300)
            }

            // 3. 事件绑定
            btnLogin.onclick = function(){
                // 获取用户的账号
                var v1 = txtInput.value;
                // 获取用户的密码
                var v2 = pwdInput.value;
                // 判断输入的值长度是否为 0
                if(v1.length == 0 || v2.length == 0){
                    console.log("输入框不能为空");
                    return;
                }
                // console.log(v1,v2);
                // 获取复选框的状态 (作为是否缓存数据的依据)
                var isCheck = checkBox.checked;
                // 判断用户信息是否正确
                if(v1 == _user["uname"]){
                    if(v2 == _user["upass"]){
                        console.log("登录成功");
                        if(isCheck){
                            // 缓存用户唯一的标记
                            setCookie("_userid",_user["id"],10);
                        }else {
                            // 追踪用户信息
                            setCookie("_userid",_user["id"]);
                        }
                        // 执行延迟函数
                        var d = setTimeout(function(){
                            // 清除延迟函数
                            clearTimeout(d);
                            // 跳转页面
                            location.href="./index.html";
                        },300)
                    }else {
                        console.log("密码错误");
                    }
                }else {
                    console.log("账号不存在");
                }
            }

            // 4. 缓存输入的值
            txtInput.oninput = function(){
                // 设置缓存
                setCookie("_username",this.value);
            }

            // 5. 进入页面时直接渲染
            if(getCookie("_username")){
                // 记录账号
                txtInput.value = getCookie("_username");
            }
        }

        // 调用函数 
        init();


        

    
    </script>
</body>
</html>